<template>
  <a-table :dataSource="dataSource" :columns="tableData" :pagination="false">
    <template #bodyCell="{ index, column }">
      <template v-if="column.dataIndex === 'title'">
        <a-form-item :name="['goods_params', index, 'title']" :rules="[{ required: true, message: '请输入标题' }]">
          <a-input v-model:value="dataSource[index].title" style="width: 280px" placeholder="请输入标题" />
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'content'">
        <a-form-item :name="['goods_params', index, 'content']" :rules="[{ required: true, message: '请输入内容' }]">
          <a-input style="width: 280px" v-model:value="dataSource[index].content" placeholder="请输入内容" />
        </a-form-item>
      </template>
      <template v-if="column.dataIndex === 'actions'">
        <a-space size="small">
          <a-popconfirm title="你确定要删除吗?" ok-text="确认" cancel-text="取消" @confirm="handleDel(index)">
            <a-button type="link" danger>删除</a-button>
          </a-popconfirm>
        </a-space>
      </template>
    </template>
  </a-table>
</template>
<script setup>

const props = defineProps({
  dataSource: {
    type: Array,
    default: () => {
      return [];
    },
  },
});

const tableData = [
  {
    title: "标题",
    dataIndex: "title",
    key: "title",
  },
  {
    title: "内容",
    dataIndex: "content",
    key: "content",
  },
  {
    title: '操作',
    dataIndex: 'actions',
    fixed: 'right',
    width: 100
  }
]
const emits = defineEmits(["delete"]);


const handleDel = (i) => {
  emits("delete", i);
}
</script>
<style lang="scss" scoped></style>
  